/**
 * @desc 用户新增组件
 */
import React, {Component} from "react";
import {withRouter} from "react-router-dom";
import {Form, Space, Button, Input, Radio} from "antd";
import {phoneReg, passwordReg} from '@/utils/regexp'
import PropTypes from "prop-types";
import {connect} from "react-redux";
import {apiUserAdd} from "@/request/system/user";

const Item = Form.Item;

class UserAdd extends Component {
    state = {
        loading: false,
        discountAdmin:'0'
    }

    /**
     * @desc 新增提交事件
     * @params object {value} 表单验证对象
     * */
    onFinish = async value => {
        this.setState({loading: true})
        value.discountAdmin = this.state.discountAdmin
        console.log(value);
        apiUserAdd(value).then(res => {
            if (res.code === 0) {
                React.$message({
                    type: 'success',
                    content: '新增成功'
                })
                //关闭弹窗
                this.props.handleCancel()
                //刷新你列表
                this.props.getList();
            }
            this.setState({loading: false})
        }).catch(e => {
            this.setState({loading: false})
        })
    };

    onChange = (e)=>{
        console.log(e);
        this.formRef.setFieldsValue({ discountAdmin: e.target.value })
        this.setState({
          discountAdmin: e.target.value,
        })
    }
    /**
     * @desc 确认自定义密码验证
     * @params Reg {rule} 验证规则
     * @params string {value} 需要验证的字符串
     * @params fun {callback} 回调函数
     * */
    validatePassword = (rule, value, callback) => {
        const password = this.formRef.getFieldsValue(['password']).password;
        if (value !== password) {
            callback('确认两次输入的密码一致')
        }
        callback()
    }

    render() {
        const {handleCancel, roleList} = this.props;
        const {loading,discountAdmin} = this.state;
        return (
            <Form
                ref={(ref) => {
                    this.formRef = ref;
                }}
                labelCol={{span: 6}}
                onFinish={this.onFinish}
                wrapperCol={{span: 16}}
                initialValues={{status: 'Y'}}
            >
                <Item name="loginName"
                      rules={[{required: true, message: '请输入用户名'},
                          {pattern: /^[0-9a-zA-Z]+|[~!@#$%^&*()_.]+$/, message: '只能输入数字与英文字母,特殊符号(~!@#$%^&*()_.)'}]}
                      label={'用户名'}>
                    <Input maxLength={16} placeholder={'请输入用户名'}/>
                </Item>
                <Item name="password"
                      rules={[{required: true, message: "请输入密码"}, {
                          pattern: /(?!^(\d+|[a-zA-Z]+|[~!@#$%^&*()_.]+)$)^[\w~!@#$%^&*()_.]{8,16}$/,
                          message: "密码应为字母，数字，特殊符号(~!@#$%^&*()_.)，两种及以上组合，8-16位字符串，如：abcd@1234"
                      }]}
                      label="密码">
                    <React.FormPassword placeholder={'请输入密码'}/>
                </Item>
                <Item name="confirmPassword"
                      rules={[{required: true, message: "请确认密码"}, {validator: this.validatePassword}]}
                      label="确认密码">
                    <React.FormPassword placeholder={'请确认密码'}/>
                </Item>
                <Item name="userName" rules={[{required: true, message: "请输入姓名"}, {max: 20}]} label="姓名">
                    <React.FormInput placeholder={'请输入姓名'}/>
                </Item>
                <Item name="userMobile"
                      rules={[{required: true, message: "请输入手机号"}, {pattern: phoneReg, message: '请输入正确手机号'}]}
                      label="手机号">
                    <React.FormInput placeholder={'请输入手机号'}/>
                </Item>
                <Item name="roleId"
                      rules={[{required: true, message: "请选择角色"}]}
                      label="角色">
                    <React.FormSelect placeholder={'请选择角色'} options={roleList}/>
                </Item>
                <Item name="discountAdmin"
                label="折扣权限">
                    <Radio.Group onChange={(e)=>this.onChange(e)} defaultValue={discountAdmin} >
                    <Radio value={'1'} onClick = {(e)=>{this.onChange(e)}} >是</Radio>
                    <Radio value={'0'} onClick = {(e)=>{this.onChange(e)}} >否</Radio>
                    </Radio.Group>
                </Item>
                <div className="p-text-align">
                    <Space size="large">
                        <Button key="back" onClick={handleCancel}>
                            取 消
                        </Button>
                        <Button type="primary" loading={loading} htmlType="primary">
                            确 定
                        </Button>
                    </Space>
                </div>
            </Form>
        );
    }
}

UserAdd.propTypes = {
    dialogType: PropTypes.string,
    handleCancel: PropTypes.func
};
UserAdd.defaultProps = {};
const mapStateToProps = state => {
    return {
        user: state.user
    };
};
const mapDispatchToProps = dispatch => {
    return {};
};
export default connect(
    mapStateToProps,
    mapDispatchToProps
)(withRouter(UserAdd));
